<template>
  <view>
    <u-navbar title="成绩单" auto-back fixed placeholder></u-navbar>
    <view class="content">
      <u-gap height="10px" bg-color="#f5f5f5"></u-gap>
      <u-collapse :border="false">
        <view class="wrap">
          <u-collapse-item v-for="item in dataList" :key="item.index" :title="item.index + '学期'" :border="false">
            <view v-for="(data, index) in item.data" :key="index">
              <u-cell :title="data.subject" :border="false" class="cell">
                <view slot="label" class="cell_label">
                  <view>
                    <text>分数：</text>
                    <text :class="{error: data.score < 60}">{{ data.score }}</text>
                  </view>
                  <text>学分：{{ data.score > 60 ? data.credit : 0 }}</text>
                </view>
                <view slot="value" class="cell_value" v-show="data.score < 60">
                  <text class="icon-out-score"></text>
                </view>
              </u-cell>
              <u-gap height="1px" bg-color="#eeeeee" v-show="index < dataList.length"></u-gap>
            </view>
          </u-collapse-item>
        </view>
      </u-collapse>
    </view>
  </view>
</template>

<script>
import {
  getScoreList
} from '@/api/user'
import mixin from '@/mixin'
export default {
  components: {},
  data() {
    return {}
  },
  mixins: [mixin],
  created() {
    this.getDataList(false)
  },
  methods: {
    getDataList(isRefresh) {
      getScoreList(this.$store.getters.id).then(res => {
        const { code, data } = res
        if(code === 200) {
          if(isRefresh) {
            this.dataList = []
          }
          console.log(data);
          const arr = []
          data.forEach(item => {
            const index = arr.findIndex(year => {
              return item.year == year
            })
            if(index === -1) {
              arr.push(item.year)
            }
          })
          arr.forEach(item => {
            const list = data.filter(el => {
              return el.year == item
            })
            this.dataList.push({
              index: item,
              data: list
            })
          })
        }
      })
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
} 
</script>

<style lang="scss" scoped>
.wrap {
  width: auto;
  background-color: #ffffff;
  margin: 10px 15px;
  border-radius: 8px;
  overflow: hidden;

  .cell {
    position: relative;
  }

  .cell_label {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 5px;
    color: #888888;
    font-size: 12px;

    & > * {
      flex: 1;
    }

    .error {
      color: #ff1111;
    }
  }

  .cell_value {
    position: absolute;
    right: 10px;
    color: #ff1111;
    

    text {
      font-size: 30px;
    }
  }
}


</style>